<script setup lang="ts">
import moment from 'moment'
import { YiTable, YiAction, YiModal } from '@uublue/yimi-element-plus'
import { isValueClassBasic } from './config-helper'
import ConfigForm from './config-form.vue'

function formatConfig(config: Record<string, any>): Record<string, any> {
  if (isValueClassBasic(config.valueClass)) {
    config.valueClassBasic = true
    config.valueOptions = config.rawDetails
  } else {
    config.valueClassBasic = false
    config.customProps = Object.keys(config.rawDetails).map((key: string) => {
      const configProp = config.rawDetails[key]
      configProp.prop = key
      return configProp
    }).sort((prop1, prop2) => {
      return prop1.order - prop2.order
    })
  }

  return config
}
</script>

<script lang="ts">
import configApis from '@/apis/system/config'
const { queryConfig, updateConfig, removeConfig } = configApis

export default {
  name: 'ConfigView',
  apis: {
    queryConfig,
    updateConfig,
    removeConfig
  },
}
</script>

<template>
  <div class="app-container">
    <YiTable
      :api="queryConfig"
      :columns="[
        {
          label: '名称',
          prop: 'name'
        },
        {
          label: '键名',
          prop: 'configKey',
          showOverflowTooltip: true
        },
        {
          label: '键值',
          prop: 'value',
          showOverflowTooltip: true,
          slot: 'value'
        },
        {
          label: '修改时间',
          prop: 'lastUpdateTime',
          formatter: (row, column, cellValue) => {
            if(cellValue) {
              return moment(cellValue).format('lll')
            }else {
              return '-'
            }
          }
        },
        {
          label: '说明',
          prop: 'remark',
          showOverflowTooltip: true
        },
        {
          label: '操作',
          prop: 'opt',
          slot: 'opt'
        }
      ]"
      :res-adapter="
          ({data}) => {
            const {rows, total} = data
            rows.forEach((row: any) => {
              row.value = row.rawValue
            })
            return {rows, total}
          }
      "

    >
      <template #value="{ row, value }">
        <span v-if="isValueClassBasic(row.valueClass)">{{ value }}</span>
        <YiModal
          v-else
          text="参数值"
          type="primary"
          trigger="link"
          :on-open="
            ({ context, resolve }) => {
              resolve(formatConfig(row))
            }
          "
        >
          <template #default="scope">
            <config-form
              v-model="scope.context"
              :custom-props="scope.context.customProps"
              :value-options="scope.context.valueOptions"
              use-for="display"
              :value-class-basic="scope.context.valueClassBasic"
            />
          </template>
        </YiModal>
      </template>

      <template #opt="{ row, refresh }">
        <yi-action
          :api="updateConfig"
          :mix-model="
            (model, mix) => {
              console.log('model', model)
              mix({
                data: {
                  configKey: model.configKey,
                  value: isValueClassBasic(model.valueClass)
                    ? model.value
                    : JSON.stringify(model.value),
                  remark: model.remark
                }
              })
            }
          "
          type="primary"
          trigger="link"
          :underline="false"
          text="修改"
          size="default"
          icon="el-icon-edit"
          :model="row"
          :on-open="
            ({ model, resolve }) => {
              resolve(formatConfig(model))
            }
          "
          :modal-title="'修改配置【' + row.name + '】'"
          dialog-width="500px"
          @on-submit-success="refresh"
        >
          <template #default="scope">
            <config-form
              v-model="scope.model"
              :form-ref="scope.form"
              :custom-props="scope.model.customProps"
              :value-options="scope.model.valueOptions"
              use-for="edit"
              :value-class-basic="scope.model.valueClassBasic"
            />
          </template>
        </yi-action>

        <yi-action
          title="删除"
          :api="removeConfig(row.id)"
          type="primary"
          trigger="link"
          :underline="false"
          text="删除"
          size="default"
          icon="el-icon-delete"
          :disabled="row.undeletable"
          confirm-text="是否删除该配置项？"
          @on-submit-success="refresh"
        />
      </template>
    </YiTable>
  </div>
</template>
